import {
  PageContainer,
  ProCard,
  ProForm,
  ProFormDigit,
  ProFormSelect,
} from '@ant-design/pro-components';
import { Divider, Form, Space, Tag, Typography } from 'antd';
import { useState } from 'react';

const { Title } = Typography;

function simulateWeaponUpgrade({ startLevel, endLevel }) {
  let attempts = 0;
  let level = startLevel;

  const successRates = [100, 90, 80, 70, 60, 75, 50, 45, 35];

  const levelList = [];

  while (level < endLevel) {
    let successRate = successRates[level] / 100;
    let isSuccessful = Math.random() < successRate;

    if (isSuccessful) {
      level++;
      levelList.push({
        stauts: 'success',
        level: '+' + level,
      });
    } else if (level >= 5) {
      level--;
      levelList.push({
        stauts: 'error',
        level: '-' + level,
      });
    } else {
      levelList.push({
        stauts: '',
        level: '-',
      });
    }
    attempts++;
  }

  return {
    attempts,
    levelList,
  };
}

const options = new Array(10).fill(0).map((n, i) => ({
  label: `+${i}`,
  value: i,
}));

function Wing() {
  const [form] = Form.useForm();
  const [list, setList] = useState<any>([]);

  const onFinish = (values) => {
    const { startLevel, endLevel, num } = values;
    const newList = new Array(num).fill(0).map(() => {
      return simulateWeaponUpgrade({ startLevel, endLevel });
    });
    setList(newList);
  };

  const averageAttempts =
    list.reduce((pre, item) => pre + item.attempts, 0) / list.length;

  const maxNum = list.reduce(
    (pre, item) => (pre < item.attempts ? item.attempts : pre),
    0,
  );

  return (
    <PageContainer
      header={{
        title: '翅膀强化模拟',
      }}
    >
      <ProCard>
        <ProForm
          form={form}
          onFinish={onFinish}
          onReset={() => {
            setList([]);
          }}
        >
          <ProFormSelect
            width="md"
            name="startLevel"
            label="当前等级"
            initialValue={0}
            options={options}
          />
          <ProFormSelect
            width="md"
            name="endLevel"
            label="目标等级"
            initialValue={9}
            options={options}
          />
          <ProFormDigit
            width="md"
            name="num"
            label="模拟次数"
            initialValue={1}
            min={1}
            fieldProps={{
              precision: 0,
            }}
          />
        </ProForm>
      </ProCard>
      <ProCard>
        {list.length > 0 && (
          <>
            <Space>
              <Title level={4}>
                {list.length}次平均强化次数：{averageAttempts}
              </Title>
              <Title level={4}>
                {list.length}次最大强化次数：{maxNum}
              </Title>
            </Space>
            <Divider />
          </>
        )}
        {list.map((item, i) => {
          return (
            <div key={i}>
              <Title level={4}>
                第{i + 1}次模拟强化次数 {item.attempts}
              </Title>
              <Space size={[4, 8]} wrap>
                {item.levelList.map((levelObj, j) => {
                  return (
                    <Tag key={j} color={levelObj.stauts}>
                      {levelObj.level}
                    </Tag>
                  );
                })}
              </Space>
              {i < list.length - 1 && <Divider />}
            </div>
          );
        })}
      </ProCard>
    </PageContainer>
  );
}

export default Wing;
